<template>
  <el-row class="app-contents" justify="space-between">
    <el-col :span="17">
      <item-wrap box-name="dv-border-box13" title="生产流程图" class="content-left">
        <left/>
      </item-wrap>
    </el-col>
    <el-col :span="7">
      <el-row align="top" class="content-right">
        <el-col :span="24" >
          <item-wrap box-name="dv-border-box13" title="报警信息概览" class="content-right-item">
            <right-top @click="goAlarmDetail"/>
          </item-wrap>
        </el-col>
      </el-row>
      <el-row justify="center" align="bottom" class="content-right">
        <el-col :span="24" >
          <item-wrap box-name="dv-border-box13" title="胶带秤统计分析" class="content-right-item">
            <right-bottom @click="goStatisticsPage" />
          </item-wrap>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import Left from './left.vue'
import RightTop from './right-top.vue'
import RightBottom from './right-bottom.vue'

const router = useRouter()
function goAlarmDetail(){
  router.push("/alarm")
}

function goStatisticsPage(){
  router.push("/statistics/contrast")
}
</script>

<style lang="scss" scoped>
.app-contents {
  margin-top: 20px;
  min-height: calc(100% - 60px);
  width: 100%;


  .content-left {
    width: 1320px;
    height: 960px
  }
  .content-right {
    width: 560px;
    height: 480px;
    .content-right-item{
      width: 540px;
      height: 470px
    }
  }
}
</style>